<template>
  <div class="container">
    <div
      id="main4"
      style="width: 800px;height:600px;"
    />
    <div
      id="main"
      style="width: 600px;height:400px;"
    />
    <div
      id="main1"
      style="width: 600px;height:400px;"
    />
    <div
      id="main2"
      style="width: 600px;height:400px;"
    />
    <div
      id="main3"
      style="width: 600px;height:400px;"
    />

  </div>
</template>

<script>
import npmLcw from 'npm-lcw'
// import echarts from 'echarts'
export default {
  created() {
    console.log('npmLcw---', npmLcw)
  },
  mounted() {
    this.myEcharts()
    this.myEcharts1()
    this.myEcharts2()
    this.myEcharts3()
    this.myEcharts4()
    this.dateFormat(new Date(), '/')
  },
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          // 标题组件，包含主标题和副标题
          text: '柱状图', // 主标题文本
          show: true, // 是否显示标题组件
          // link: 'http://www.baidu.com',//主标题文本超链接
          // target: 'blank',//指定窗口打开主标题超链接,'self' 当前窗口打开,'blank' 新窗口打开(默认)
          textStyle: {
            // 住标题的样式
            color: 'red', // 颜色
            fontStyle: 'italic', // 字体风格，有三种可选'normal' 'italic' 'oblique'
            fontWeight: 'bold', // 主标题文字字体的粗细,normal,bold,bolder,lighter 100 | 200 | 300 | 400...
            triggerEvent: true
          }
        },
        tooltip: {},
        legend: {
          // 图例组件
          data: ['销量']
        },
        grid: {
          // 直角坐标系内绘图网格
          // show: true
        },
        xAxis: {
          // 直角坐标系 grid 中的 x 轴
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {
          // show:false,
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            showBackground: true,
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    myEcharts1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main1'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '柱状图带不同颜色'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [
              120,
              {
                value: 200,
                itemStyle: {
                  color: '#a90000'
                }
              },
              150,
              80,
              70,
              110,
              130
            ],
            type: 'bar'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    myEcharts2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main2'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '折线图'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    myEcharts3() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main3'))

      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '饼状图',
          subtext: '纯属虚构',
          left: 'center'
        },
        tooltip: {
          // trigger: "item"
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '搜索引擎' },
              { value: 735, name: '直接访问' },
              { value: 580, name: '邮件营销' },
              { value: 484, name: '联盟广告' },
              { value: 300, name: '视频广告' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    dateFormat(data, symbol) {
      // '今天：yyyy-MM-dd'
      const myDates = new Date(data)
      const timers = myDates.getTime() - 86400000 * 3
      const myDate = new Date(timers)
      console.log('myDate--', data)
      const year = myDate.getFullYear() // 获取完整的年份(4位,1970-????)
      const month = `0${myDate.getMonth() + 1}`.substr(-2) // 获取当前月份(0-11,0代表1月)
      const day = `0${myDate.getDate()}`.substr(-2) // 获取当前日(1-31)
      // const hours = `0${myDate.getHours()}`.substr(-2);       //获取当前小时数(0-23)
      // const minutes = `0${myDate.getMinutes()}`.substr(-2);     //获取当前分钟数(0-59)
      // const seconds = `0${myDate.getSeconds()}`.substr(-2);     //获取当前秒数(0-59)
      // console.log("时间---", symbol.replace('yyyy', year))
      console.log('时间---', year + symbol + month + symbol + day)
      return year + symbol + month + symbol + day
    },
    myEcharts4() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('main4'))
      const data = [220, 182, 191, 234, 290, 330, 310]
      // const sideData = data.map((item) => item + 4.5)

      var option = {
        tooltip: {
          trigger: 'axis',
          confine: true,
          axisPointer: { type: 'none' },
          textStyle: { fontSize: 12, fontWeight: 500 },
          formatter(params) {
            // 只展示柱子对应的内容，把顶部底部的 tooltip 过滤掉
            return params.reduce((pre, i) => {
              if (i.componentSubType === 'bar') {
                i.marker = i.marker.replace(
                  /\[object Object\]/,
                  i.color.colorStops[1].color
                )
                i.value = `<span style="flex: 1; text-align: right; margin-left: 16px;">${i.value}</span>`
                const current = `<div style="display: flex; align-items: center; height: 26px;">${i.marker}${i.seriesName} ${i.value}</div>`
                return `${pre}${current}`
              }
              return pre
            }, '')
          }
        },
        legend: {
          data: ['武汉', '北京', '上海'],
          right: 10,
          top: 12,
          type: 'scroll',
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 16,
          // 因为柱子顶部和底部是通过 offset 跟柱子结合起来的，如果取消选中，柱子数量变化，又要重新计算 offset，为了简单点就直接禁掉了
          selectedMode: false
        },
        grid: { left: '3%', right: '4%', bottom: '5%', containLabel: true },
        xAxis: {
          type: 'category',
          data: ['2020', '2021'],
          axisLine: { lineStyle: { color: '#F2F4F7' }},
          axisTick: { show: false },
          axisLabel: { color: '#585D63' }
        },
        yAxis: {
          boundaryGap: [0, 0.01],
          axisLine: { lineStyle: { color: '#F2F4F7' }},
          axisTick: { show: false },
          axisLabel: { color: '#585D63' },
          splitLine: { lineStyle: { color: '#F2F4F7' }}
        },
        series: [
          {
            name: '武汉',
            type: 'bar',
            barWidth: 24,
            barCategoryGap: 12,
            data: data,
            itemStyle: {
              // 柱体渐变色
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#E1A4FF'
                },
                {
                  offset: 1,
                  color: '#C65FF9'
                }
              ])
            }
          },
          {
            name: '武汉',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            // 这个属性很重要，直接决定了顶部跟柱子是否契合
            symbolOffset: [-29, -3],
            z: 12,
            itemStyle: { color: '#C65FF9' },
            symbolPosition: 'end',
            // 要给成武汉这两个柱子的值，这是圆柱顶部，值不给对高度会对不上
            data: data
          },
          {
            name: '武汉',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [-29, 3],
            z: 12,
            itemStyle: { color: '#C65FF9' },
            symbolPosition: 'start', // 这个给成大于 0 的值就行，设置了 position，一定会在柱子底部展示
            data: [1, 1]
          },
          {
            name: '北京',
            type: 'bar',
            barWidth: 24,
            barCategoryGap: 12,
            data: ['3.7493', '1.5536'],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#FFAC97'
                },
                {
                  offset: 1,
                  color: '#FF704C'
                }
              ])
            }
          },
          {
            name: '北京',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [0, -3],
            z: 12,
            itemStyle: { color: '#FF704C' },
            symbolPosition: 'end',
            data: ['3.7493', '1.5536']
          },
          {
            name: '北京',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [0, 3],
            z: 12,
            itemStyle: { color: '#FF704C' },
            symbolPosition: 'start',
            data: ['3.7493', '1.5536']
          },
          {
            name: '上海',
            type: 'bar',
            barWidth: 24,
            barCategoryGap: 12,
            data: ['56.1131', '23.6478'],
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#71A8FE'
                },
                {
                  offset: 1,
                  color: '#2872FC'
                }
              ])
            }
          },
          {
            name: '上海',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [29, -2],
            z: 12,
            itemStyle: { color: '#2872FC' },
            symbolPosition: 'end',
            data: ['56.1131', '23.6478']
          },
          {
            name: '上海',
            type: 'pictorialBar',
            symbolSize: [24, 6],
            symbolOffset: [29, 3],
            z: 12,
            itemStyle: { color: '#2872FC' },
            symbolPosition: 'start',
            data: ['56.1131', '23.6478']
          }
        ],

        // legend 对应的 color，实际上柱状图的颜色都是在 itemStyle 里定义的
        color: ['#C65FF9', '#FF704C', '#2872FC']
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  // display: flex;
  // flex-wrap: wrap;
  width: 100%;
}
</style>
